<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { MinusCircleFilled,  PlusOutlined} from '@ant-design/icons-vue'
import PageHeader from "@/components/PageHeader.vue";
import Upload from "@/components/Upload.vue";
import {refundOrderApi, orderDetailApi, refundListApi} from "@/api";
import {message} from "ant-design-vue";
const router = useRouter()
const route = useRoute()
const orderId = ref()
const imgId = ref([])
const imgUrl = ref([])
// 退款商品id
const goodsId = ref()
// 退款原因
const refundCause = ref(0)
// 退款详情
const refundInfo = ref('')
// 货物状态 0 => '未收货', 1 => '已收货'
const transportStatus = ref('1')
// 退款原因列表
const refundCauseList = ref([])
// 上传图片
const upload = (e) => {
  imgId.value.push(e.id)
  imgUrl.value.push(e.path)
}
// 删除图片
const delImg = (index) => {
  imgId.value.splice(index, 1)
  imgUrl.value.splice(index, 1)
}
const submit = () => {
  if (!refundInfo.value) return message.warn('请输入退款信息')
  const params = {
    z_id: goodsId.value,
    order_id: orderId.value,
    refund_cause: refundCause.value,
    refund_info: refundInfo.value,
    refund_img: imgId.value.join(),
    transport_status: transportStatus.value,
  }
  refundOrderApi(params).then(() => {
    message.success('申请成功，请等待商家审核')
    router.back()
  }).catch((err) => message.error(err.msg))
}
// 获取退款原因列表
const getRefundList = () => {
  refundListApi().then(res => {
    refundCauseList.value = res
  })
}
onMounted(() => {
  const { id, zId } = route.query
  orderId.value = id
  goodsId.value = zId
  getRefundList()
})
</script>

<template>
  <div class="eva-order">
    <PageHeader>
      <a-button class="p-btn" type="primary" size="small" @click="submit"> 提交 </a-button>
    </PageHeader>
    <div class="eva-main">
      <div class="box">
        <div class="title">
          <span> 退款原因 </span>
          <a-select v-model:value="refundCause" style="width: 200px">
            <a-select-option :value="index" v-for="(item, index) in refundCauseList" :key="item">
              {{ item }}
            </a-select-option>
          </a-select>
        </div>
        <div class="title">
          <span> 货物状态 </span>
          <a-radio-group v-model:value="transportStatus" name="radioGroup">
            <a-radio value="1"> 已收货 </a-radio>
            <a-radio value="0"> 未收货 </a-radio>
          </a-radio-group>
        </div>
      </div>
      <div class="box">
        <div class="title"> 退款详情 </div>
        <textarea v-model="refundInfo" class="textarea" placeholder="请输入评价信息"/>
      </div>
      <div class="box">
        <div class="title"> 退款图片 </div>
        <div class="img-box">
          <div class="img" v-for="(item, index) in imgUrl" :key="item">
            <img :src="item" class="img" alt="">
            <MinusCircleFilled class="close" @click="delImg(index)" />
          </div>
          <Upload @upload="upload"> <PlusOutlined/> </Upload>
        </div>
      </div>
      <a-button class="m-btn" type="primary" @click="submit"> 提交 </a-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.eva-order {
  padding: 40px 10px;
  .eva-main {
    gap: 10px;
    display: flex;
    flex-direction: column;
    .box {
      padding: 10px;
      border-radius: 10px;
      box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
      .title {
        font-size: 16px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .textarea {
        width: 100%;
        max-width: 100%;
        min-height: 100px;
        border: none;
        outline: none;
        padding: 10px;
        border-radius: 10px;
        background-color: #f8f8f8;
      }
      .img-box {
        gap: 15px;
        display: flex;
        flex-wrap: wrap;
        .img {
          width: 100px;
          height: 100px;
          border-radius: 8px;
          position: relative;
          object-fit: cover;
          .close {
            color: #f40;
            font-size: 20px;
            cursor: pointer;
            position: absolute;
            top: 0;
            right: 0;
            transform: translate(50%, -50%);
          }
        }
      }
    }
  }
  .p-btn, .m-btn {
    background-color: var(--primary);
  }
  @media (max-width: 750px) {
    .p-btn {
      display: none;
    }
  }
  @media (min-width: 750px) {
    .m-btn {
      display: none;
    }
  }
}
</style>